<template>
  <div class="chaxun">
    <!-- 头部导航栏 -->
    <head-component title="大数据查询"/>
    <div class="chaxun_box">
      <div class="list"  v-for="(item,i) in list" :key="i" @click="toPage(item.p_id, item.p_name)">
        <p class="top f24 col_ff">推荐</p>
        <img :src="item.p_img" alt="">
        <p class="fanyong">返佣{{item.p_award}}</p>
        <p class="f32 col_33 oneline">{{item.p_name}}</p>
        <div class="time f24 col_ff oneline"></div>
      </div>
      <!-- 如果内容列表为空 -->
      <div class="null_list" v-if="list == ''">
        <img class="null_img" src="@/common/icon/nothing.png" alt="">
        <div class="null_title">暂无数据</div>
      </div>
    </div>
  </div>
</template>
<script>
import headComponent from '@/components/layout/head';
export default {
  name: '',
  components: {
    headComponent
  },
  data() {
    return {
      list: [],
      userStatus: 0
    }
  },
  watch: {},
  mounted() {
    let $this = this;
    $this.userStatus = localStorage.getItem("isVip");
    $this.getList();
  },
  methods: {
    getList(){
      let $this = this;
      var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      let uid = localStorage.getItem('uid');
      let token = localStorage.getItem('token');
      var data = {u_id: uid,token:token};
      $this.$axios.post('/index.php?m=index&c=select',data).then((res) => {
        t.clear();
        console.log(res.data)
        if(res.data.code == 1){
          res.data.data.map((item, index) => {
            let obj=item;
            $this.list.unshift(obj);
          })
        }else{
          $this.$toast({
            message: res.data.msg,
            duration: 800
          })
        }
      })
    },
    toPage(id, name){
      var $this = this;
      // location.href = path;
      $this.$router.push(`/daikuanDetails?id=${id}&&name=${name}&&type=5`)
    },
  },
}
</script>
<style lang="less">
  .chaxun_box{
    margin-top: 1.2rem;
    border-top: 1Px solid #f5f5f5;
    padding: 0.6rem 0.6rem;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    .list{
      float: left;
      width: 4.13rem;
      border-radius: 0.16rem;
      border: 0.02rem solid #f5f5f5;
      margin-bottom: 0.53rem;
      padding: 0 0 0.4rem;
      position: relative;
      text-align: center;
      overflow:hidden;
      .fanyong{
        color: #fd5f5f;
        font-weight: 600;
      }
      .top{width: 100%;height: 0.53rem;line-height: 0.53rem;text-align: center;transform: rotate(-45deg);
        position: absolute;background: #ff6840;top: 0.16rem;left: -1.7rem;
      }
      img{width: 1.1rem;
        height: 1.1rem;
        display: block;
        margin: 0.4rem auto 0.13rem;
      }
      .tit2{line-height: 0.76rem;}
      .price{color: #fd5f5f;font-weight: 600;margin-bottom: 0.14rem}
    }
  }
</style>
